<template>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left back-btn"></i>
      <p>收银台</p>
    </header>

    <!-- 支付信息 -->
    <div class="payment-info">
      <div class="payment-time">支付剩余时间 14:37</div>
      <div class="payment-amount">¥{{orders.orderTotal}}</div>
      <div class="payment-title">{{business?.businessName}}外卖订单</div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-methods">
      <ul class="payment-way">
        <li>
          <img src="../assets/alipay.jpg">
          <div>
            <p>支付宝</p>
          </div>
          <i class="fa fa-check-circle"></i>
        </li>
        <li>
          <img src="../assets/unionpay.png">
          <div>
            <p>银联</p>
            <p class="promotion">云南云闪付满10减2，先到先得</p>
          </div>
          <div class="radio"></div>
        </li>
        <li>
          <img src="../assets/wechat.jpg">
          <div>
            <p>微信支付</p>
          </div>
          <div class="radio"></div>
        </li>
      </ul>
    </div>

    <!-- 确认支付按钮 -->
    <div class="payment-button">
      <button @click="pay">确认支付</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance } from 'vue'
import Footer from './Footer.vue'  // 修改为相对路径
import request from '@/utils/request'  // 添加导入
import { ElMessage } from 'element-plus'  // 添加导入

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const orderId = ref(route.query.orderId)
const orders = ref({})
const user = ref({})

onMounted(() => {
  const token = sessionStorage.getItem('token')
  if (!token) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }

  user.value = proxy.$getSessionStorage('user')
  if (!user.value) {
    ElMessage.warning('用户信息已失效，请重新登录')
    router.push('/login')
    return
  }

  request({
    url: '/OrdersController/getOrdersById',
    method: 'get',
    params: {
      orderId: orderId.value
    }
  }).then(response => {
    orders.value = response.data
  }).catch(error => {
    console.error(error)
  })
})

const pay = () => {
  request({
    url: '/OrdersController/updateOrderState',
    method: 'post',
    data: {
      orderId: orderId.value,
      orderState: 1
    }
  }).then(response => {
    if (response.data > 0) {
      ElMessage.success('支付成功')
      router.push('/orderList')
    } else {
      ElMessage.error('支付失败')
    }
  }).catch(error => {
    console.error(error)
    ElMessage.error('支付失败')
  })
}
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  min-height: 100vh;
  background: #001c58; /* 深蓝色背景 */
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 44px;
  background: transparent; /* 透明背景 */
  color: #fff;
  font-size: 16px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 返回按钮 */
.back-btn {
  position: absolute;
  left: 15px;
  font-size: 20px;
  color: #fff;
}

/* 支付信息区域 */
.payment-info {
  padding-top: 60px;
  text-align: center;
  color: #fff;
}

.payment-time {
  font-size: 14px;
  margin-bottom: 15px;
  opacity: 0.8;
}

.payment-amount {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.payment-title {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 30px;
}

/* 支付方式容器 */
.payment-methods {
  margin: 15px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

/* 支付方式列表 */
.payment-way {
  width: 100%;
  background: #fff;
}

.payment-way li {
  padding: 15px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.payment-way li img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.payment-way li p {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.payment-way li .promotion {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

.payment-way li .fa-check-circle {
  font-size: 20px;
  color: #0097FF;
  position: absolute;
  right: 15px;
}

.payment-way li .radio {
  width: 20px;
  height: 20px;
  border: 1px solid #ddd;
  border-radius: 50%;
  position: absolute;
  right: 15px;
}

/* 确认支付按钮 */
.payment-button {
  padding: 20px 15px;
}

.payment-button button {
  width: 100%;
  height: 44px;
  background: #0097FF;
  border: none;
  border-radius: 22px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
</style>